<template>
  <div class="publicBox" id="order_estailsCss">

<el-form ref="form" :model="ruleForm"  class="demo-form-inline publicEditFrom" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
       <p>退款管理/新建</p>               
     </div>
</el-row>

<div>
    <el-row>
        <div class="pubPage">
        <p>订单信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>订单时间：{{rowData.ordertime}}</p>
            <p>设备编码：{{rowData.orderno  }}</p>
        </div>
            <div class="box">
            <p>订单编号：{{rowData.no}}</p>
            <p>设备类型：{{rowData.equipmenttypename}}</p>
        </div>
            <div class="box">
            <p>订单类型：{{rowData.ordertypename}}</p>
            <p>服务项目：{{rowData.servicesavailablename}}</p>
        </div>
            <div class="box">
            <p>订单状态：{{rowData.orderstatusname}}</p>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>支付信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>支付时间：{{rowData.orderpaytime}}</p>
            <p>订单金额：{{rowData.orderamount}}</p>
        </div>
            <div class="box">
            <p>支付流水号：{{rowData.orderpayno}}</p>
            <p>支付金额：{{rowData.payamount}}</p>
        </div>
            <div class="box">
            <p>支付方式：{{rowData.paytypename}}</p>
            <p>优惠金额：{{rowData.discountamount}}</p>
        </div>
            <div class="box box_p">
            <p>优惠类型：{{rowData.discounttype}}</p>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>用户信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>用户ID：<span style="color:#5DA5FE">{{rowData.id}}</span></p>
        </div>
            <div class="box">
            <p>用户手机号：{{rowData.phone}}</p>
        </div>
    </div>
</div>

<div>
    <el-row>
        <div class="pubPage">
        <p>退款信息</p>               
        </div>
    </el-row>

    <div class="warp">
        <div class="box">
            <p>退款原因：{{rowData.reason}}</p>
            <p>退款金额：{{rowData.refundamount}}</p>
            <p>退款方式：{{rowData.typename}}</p>
        </div>

    </div>
</div>


<div>
    <el-row>
        <div class="pubPage">
        <p>审核信息</p>               
        </div>
    </el-row>

<div class="warp">
        <div class="box">
            <p>审核意见:
                  <el-select v-if="flag" v-model.number="ruleForm.approveType" filterable  placeholder="同意退款" class="pubSlt138">
                       <el-option
                         v-for="item in orderStatus"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id" 
                         >
                       </el-option>
                  </el-select>     
                  <span v-else>{{rowData.orderrefundstatusname}}</span>
            </p>
        </div>
    </div>
</div>
<div class="warp">
               <div class="box textarea">
                   <p>审核说明:</p>
                   <el-input
                        v-if="flag"
                        v-model="ruleForm.approveRemark"
                         type="textarea"
                         :autosize="{ minRows: 4, maxRows: 6}"
                         placeholder="请输入审核说明，如无则不用填写"
                         >
                       </el-input>
                       <span v-else>{{rowData.remark}}</span>
               </div>
</div>

<div class="warp" v-if="!flag">
               <div class="box">
                   <p>审核人:
                       <span>{{rowData.approvername}}</span>
                       </p>
               </div>
</div>
        

<el-row class="pubSubmitBtn-row">
            <el-button class="pubBtnBlue105" v-if="flag" type="primary" @click="submitForm">提交</el-button>
            <el-button class="pubBtnBlue105" @click="$canCleFn" type="primary">返回</el-button>
</el-row>
</el-form>
  </div>
</template>

<script>
import * as API from '@api/orders.js'
export default {
  components: {


  },
  data() {
    return {
        flag:null,
         orderStatus:[
             {id:2,name:"同意退款"},
             {id:1,name:"驳回"}
             ],
         rowData:{},
         ruleForm:{
             approveType:'',
             approveRemark:''
         }

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    getalldatails(){
        var status=this.rowData.refundstatus
        console.log(status)
        if(status === 0){
            this.flag = true
            console.log(this.flag)
            this.GETReturnFinanceDetails()
        }else{
            this.flag = false
            // this.flag = true
            console.log(this.flag)
            this.GETReturnFinanceDetails()
        }
    },
    submitForm(){
           this.$refs["form"].validate((valid) => {
            if (valid) {
                    this.putApproval()
            } else {
              console.log('error submit!!');
              return false;
            }
        });
    },
    GETReturnFinanceDetails(){
        // console.log('this.rowData',this.rowData)
        var id = this.rowData.id
        // console.log('id',id)
        API.GETReturnFinanceDetails(id).then(res=>{
            if(res.IsPositive){
                this.rowData = res.Data
            }else{
                this.$message.error({message:res.ErrorCode})
            }       
        })
    },
    putApproval(){
        this.ruleForm.id=this.rowData.id
        console.log(this.rowData.id)
        API.putApproval(this.ruleForm).then(res=>{
            if(res.IsPositive){
              this.$message.success({message:"操作成功"})
              this.$router.push({path:'/platform/finance/refund'})
            }else{
                this.$message.error({message:res.ErrorCode})
            }
        })
     }

  },
  created() {
    if(Object.keys(this.$route.query).length>0){
        let data=this.$route.query.data
        // console.log('data',data)
        this.rowData=data
    }
    this.getalldatails()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="less" scoped>
 #order_estailsCss{
     display: flex;
     flex-direction: column;
        .pubPage{ 
            padding:0 0 10px 0;
            color: #a7a7a7;
            border-bottom: 1px dashed #000000;
        }
        .warp{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            width: 1280px;
            // height: 100px;
            margin: 15px 0;
            .box{
                width: 260px;
                p{
                    margin-bottom: 5px;
                    font-size: 16px;
                }
                
            }
            .box_p{
                    margin-top: 28px;
                }
        }
        .textarea{
            width: 100% !important;
            p{
                float: left;
            }
            div{
                width: 513px;
                float: left;
            }
        }
    }
</style>